<template>
	<view class="content">
		<view class="card">
			<view class="main-header">
				<view class="title">
					基本信息
				</view>
			</view>
			<view class="goods-card">
				<view class="display: flex;margin-bottom: 10rpx;">
					<view class="tags-name">
						<span style="font-size: 32rpx;">调拨类型:</span>
						<view class="type1" v-if="routeParams.transfer_type === 1">
							车销提货
						</view>
						<view class="type2" v-else>
							车销回库
						</view>
					</view>
				</view>
				<view class="goods-item">
					单据日期: {{routeParams.create_time}}
				</view>
				<view class="goods-item">
					状态: {{statusType[routeParams.order_status]}}
				</view>
				<view class="goods-item">
					备注: {{routeParams.remark}}
				</view>
				<view class="goods-progress">
					<view class="title">
						<view class="">
							{{routeParams.start_warehouse_name}}
						</view>
						<view class="">
							{{routeParams.end_warehouse_name}}
						</view>
					</view>
					<view class="progress-line">
						<up-steps :current="Number(routeParams.order_status) - 1" activeIcon="checkmark"
							inactiveIcon="arrow-right">
							<up-steps-item title="已下单" desc=""></up-steps-item>
							<up-steps-item title="已审核" desc=" "></up-steps-item>
							<up-steps-item title="运输中" desc=" "></up-steps-item>
						</up-steps>
					</view>
					<view class="goods-footer">
						<view class="">
							调出仓库
						</view>
						<view class="">
							调入仓库
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="main-header">
				<view class="title">
					商品信息
				</view>
			</view>
			<view class="goods-card">
				<up-row justify="space-between">
					<up-col span="4">
						<up-icon label="商品名" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
						</up-icon>
					</up-col>
					<up-col span="2">
						<up-icon label="数量" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
						</up-icon>
					</up-col>
					<up-col span="2">
						<up-icon label="单位" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
						</up-icon>
					</up-col>
					<up-col span="2">
						<up-icon label="金额" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
						</up-icon>
					</up-col>
				</up-row>
				<view class="line"></view>
				<block v-for="(item, index) in routeParams.detail" :key="index">
					<up-row justify="space-between">
						<up-col span="4">
							<up-text :text="item.goods.goods_name" color="rgba(101, 103, 105, 1)" align="center"
								class="truncate-text"></up-text>
						</up-col>
						<up-col span="2">
							<up-text :text="item.spec.num" color="rgba(101, 103, 105, 1)" align="center"
								class="truncate-text"></up-text>
						</up-col>
						<up-col span="2">
							<up-text :text="item.spec.unit_name" color="rgba(101, 103, 105, 1)" align="center"
								class="truncate-text"></up-text>
						</up-col>
						<up-col span="2">
							<up-text :text="item.price" color="rgba(101, 103, 105, 1)" align="center"
								class="truncate-text"></up-text>
						</up-col>
					</up-row>
				</block>
				<view class="line"></view>
				<view class="footer">
					<span>商品总数：{{routeParams.detail?.length}}</span>
					<span>总计金额：{{routeParams.detail?.reduce((cur, item) => cur + Number(item.price), 0).toFixed(2)}}</span>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad, onShow } from '@dcloudio/uni-app'
	const routeParams = ref({})
	onLoad((options) => {
		routeParams.value = JSON.parse(options.data)
		const conversionRateMap = new Map();
		routeParams.value.detail.forEach((item) => {
			item.goods.spec.forEach((val) => {
				conversionRateMap.set(val.id, val.conversion_rate);
			});
		});
		routeParams.value.detail.forEach((item) => {
			const conversionRate = conversionRateMap.get(item.spec.id);
			if (conversionRate) {
				item.spec.num = item.transfer_num / conversionRate;
			}
		});
		// console.log(routeParams.value, '009')
	})
	const statusType = {
		1: '待审核',
		2: '待出库',
		3: '待入库',
		4: '已完成',
		5: '已取消'
	}
	// const goodsList = [{
	// 	name: '康师傅方便面',
	// 	num: 4,
	// 	unit: '瓶',
	// 	amount: 121
	// }, {
	// 	name: '康师傅方便面',
	// 	num: 4,
	// 	unit: '瓶',
	// 	amount: 121
	// }, {
	// 	name: '康师傅方便面',
	// 	num: 4,
	// 	unit: '瓶',
	// 	amount: 121
	// }, {
	// 	name: '康师傅方便面',
	// 	num: 4,
	// 	unit: '瓶',
	// 	amount: 121
	// }]
</script>
<style lang="scss" scoped>
	.content {
		padding: 12rpx;
		background-color: #f0f0f0;
	}

	.card {
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		border-radius: 16rpx 16rpx 0 0;
		margin: 20rpx 0;
		background-color: #fff;

		.main-header {
			display: flex;
			justify-content: space-between;
			gap: 12rpx;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: rgba(1, 11, 31, 1);
			}

			.addGoods {
				color: rgba(15, 127, 255, 1);
			}
		}

		.goods-card {
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			padding: 6rpx;
			box-sizing: border-box;
		}

		:deep(.u-icon) {
			justify-content: center;
			text-align: center;
			/* 让图标内的标题居中 */
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			/* 标题超出部分用省略号代替 */
		}

		.line {
			width: 654rpx;
			height: 0rpx;
			margin: 20rpx auto;
			border: 2rpx solid rgba(0, 0, 0, 0.1);
		}

		.footer {
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(100, 101, 102, 1);
			margin-left: 30rpx;
			margin-bottom: 20rpx;
		}

		.truncate-text {
			max-width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			/* 内容超出部分用省略号代替 */
		}

		.tags-name {
			display: flex;
			font-size: 24rpx;

			// font-weight: 500;
			.type1 {
				border-radius: 2px;
				padding: 6rpx;
				height: 30rpx;
				border: 1px solid rgba(15, 127, 255, 1);
				color: rgba(15, 127, 255, 1);
				margin: 0 12rpx;
			}

			.type2 {

				border-radius: 2px;
				padding: 6rpx;
				height: 30rpx;
				border: 1px solid rgba(255, 84, 84, 1);
				color: rgba(255, 84, 84, 1);
			}
		}

		.goods-item span {
			flex: 1;
			text-align: center;


		}

		.goods-progress {
			display: flex;
			flex-direction: column;
			padding: 24rpx;
			background: rgba(15, 127, 255, 0.05);

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 45rpx;
				color: rgba(2, 14, 36, 1);
			}

			.progress-line {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				overflow-x: auto;
			}

			up-steps {
				display: flex;
				flex: 1;
			}

			up-steps-item {
				min-width: fit-content;
			}

			.goods-footer {
				display: flex;
				justify-content: space-between;
			}
		}

		.footer {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 10rpx;
		}
	}
</style>